<template>
	<div class="preview">
		<router-link to="/" class="u-back"><i class="el-icon-arrow-left"></i>返回</router-link>
		<ly-mobile>
			<div class="bgm-btn" v-if="h5Config.bgm" :class="{rotate: isPlay}" @click="togglePlay">
				<audio ref="music" :src="h5Config.bgm" autoplay preload="auto" loop></audio>
			</div>
			<swiper :options="swiperOption" ref="mySwiper">
				<swiper-slide v-for="(page, idx) in pages" :key="page.id">
					<div class="wrap-bg" :style="{
					  backgroundColor: page.css.bgc,
					  backgroundImage: 'url(' + page.css.bgi + ')'}">
					</div>
					<div v-for="comp in page.comps" class="animated" :style="{zIndex:comp.css.z,position: 'relative'}" :class="{[animations[comp.anim.type]['class']]: activePage === idx}"
					 :key="comp.id">
						<component-renderer :comp="comp" @redirect="show_appoint_page"></component-renderer>
					</div>
				</swiper-slide>
			</swiper>
		</ly-mobile>
	</div>
</template>

<script>
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
	import ComponentRenderer from '@/containers/component-renderer'
	import {
		ANI_NAME
	} from '@/const/animation-match.js'
	import lyMobile from '@/layouts/ly-mobile'

	export default {
		name: 'Preview',
		data() {
			return {
				isPlay: true,
				activePage: 0,
				animations: ANI_NAME,
				swiperOption: {
					direction: 'vertical'
				}
			}
		},
		computed: {
			Swiper() {
				return this.$refs.mySwiper.swiper
			},
			pages() {
				var pages = this.$store.getters.pages
				if (pages) {
					for (let page of pages) {
						for (let comp of page.comps) {
							this.$store.commit('EDIT_COMP', {
								type: 'isProview',
								compid: comp.id,
								value: true
							})
						}
					}
				}
				return pages;
			},
			h5Config() {
				return this.$store.getters.h5Config
			}
		},
		methods: {
			togglePlay() {
				const music = this.$refs.music
				if (this.isPlay) {
					this.isPlay = false
					music.pause()
				} else {
					this.isPlay = true
					music.play()
				}
			},
			show_appoint_page(id) {
				// 跳转到指定页面显示
				this.$refs.mySwiper.swiper.slideTo(id, 0, true)
			}
		},
		mounted() {
			const self = this
			this.Swiper.on('init', function() {
				self.activePage = this.activeIndex
			})
			this.Swiper.on('slideChangeTransitionStart', function() {
				self.activePage = this.activeIndex
			})
			// this.Swiper.on('slideChangeTransitionEnd', function () {
			//   self.activePage = null
			// })
		},
		components: {
			swiper,
			swiperSlide,
			lyMobile,
			ComponentRenderer
		}
	}
</script>
<style lang="scss">
	$view_width: 320px;
	$view_height: 486px;

	.preview {
		overflow: hidden;
		position: relative;
		height: 100%;

		.comp {
			position: absolute
		}
	}

	.wrap-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-origin: content-box;
		background-position: 50% 50%;
	}

	.u-back {
		float: left;
		margin: 10px;
		color: #409eff;
		font-size: 18px;
		font-weight: bold;
	}
</style>
